{% extends 'accounts/base.html' %}

{% load humanize %}
{% load pagination_tags %}
{% load thumbnail i18n staticfiles accounts_tags %}

{% block title %}{{ user_obj }} | {{ block.super }}{% endblock %}
{% block head %}
  {% if user_position_json != "null" %}
    <link rel="stylesheet" href="{% static "leeflet_0.4.5/dist/leaflet.css" %}" type="text/css"/>
    <!--[if lte IE 8]>
        <link rel="stylesheet" href="{% static "leeflet_0.4.5/dist/leaflet.ie.css" %}" type="text/css"/>
    <![endif]-->
    <script src="{% static "leeflet_0.4.5/dist/leaflet.js" %}"></script>
    <style>
        #map {
            height: 300px;
        }
    </style>
    <script>
    jQuery(function($){
        var IS_AUTHENTICATED = {% if user.is_authenticated %}true{% else %}false{% endif %};
        var USER_POSITION = {{ user_position_json|safe }};

	// create a map in the "map" div, set the view to a given place and zoom
	var map = L.map('map', {
	    minZoom: 2
	}).setView([USER_POSITION.lat, USER_POSITION.lng], 8);

	// add an OpenStreetMap tile layer
	L.tileLayer('//{s}.tile.osm.org/{z}/{x}/{y}.png', {
	    attribution: '&copy; <a href="//osm.org/copyright">OpenStreetMap</a> contributors'
	}).addTo(map);

	  // define markers
	var UserMarker = L.Icon.extend({
	    options: {
		shadowUrl: null,
		iconAnchor: new L.Point(16, 36),
		iconSize: new L.Point(32, 37),
		iconUrl: '{% static "leeflet_0.4.5/icons/snakes.png" %}'
	    }
	});

	var userMarker = null;
	userMarker = L.marker([USER_POSITION.lat, USER_POSITION.lng], {icon: new UserMarker()});
	userMarker.addTo(map);
    });
    </script>
  {% endif%}
{% endblock %}
{% block content %}
    <div class="row">
      <div class="span5 offset2">
        <h2>{{ user_obj }}</h2>
        {% if user_obj.first_name or user_obj.last_name %}
        <h4>{{ user_obj.first_name }} {{ user_obj.last_name }}</h4>
        {% endif %}
        {% achievements user_obj %}
      </div>
      <div class="span5">
        <img src="{{ user_obj.avatar }}" class="img-polaroid"/>
      </div>
    </div>

    {% if user_obj.biography %}
    <div class="row">&nbsp;</div>
    <div class="row well">
      <div class="span9 offset2">
        {{ user_obj.biography|linebreaksbr }}
      </div>
    </div>
    {% endif %}

    {% if user.is_staff %}
    <div class="row" title="{% trans "This is visible for staff only." %}">
      <div class="span5 offset2"></div>
      <div class="span3">
        <a href="{% url 'admin:accounts_user_change' user_obj.pk %}">
            <i class="fa fa-pencil"> {% trans "Edit" %}</i></a>
        <a href="{% url 'accounts:profile_spammer' user_obj.pk %}">
          <i class="fa fa-warning"> {% trans "Spammer" %}</i></a>
      </div>
    </div>

    <div class="row">
      <div class="span5 offset2">Email:</div>
      <div class="span3" title="{% trans "This is visible for staff only." %}">{{ user_obj.email }}</div>
    </div>
    {% endif %}

    <div class="row">
      <div class="span5 offset2">{% trans "Forum posts count" %}:</div>
      <div class="span3">{{ user_obj.forum_post_count }}</div>
    </div>

    <div class="row">
      <div class="span5 offset2">{% trans "Comments count" %}:</div>
      <div class="span3">{{ user_obj.comments_count }}</div>
    </div>

    <div class="row">
      <div class="span5 offset2">{% trans "Date of join" %}:</div>
      <div class="span3">{{ user_obj.date_joined|naturalday }}</div>
    </div>

    <div class="row">
      <div class="span5 offset2">{% trans "Date of last login" %}:</div>
      <div class="span3">{{ user_obj.last_login|naturalday }}</div>
    </div>

    {% if user_obj.voted_topics.all|length > 0 %}
    <div class="row">&nbsp;</div>
    <div class="row">
      <div class="span9 offset2">
        <div>{% trans 'Voted topics' %}</div>
        {% for item in user_obj.voted_topics.all|slice:":10" %}
        <div class="span11"><a href="{{ item.get_absolute_url }}">{{ item }}</a></div>
        {% endfor %}
      </div>
    </div>

    {% if user_obj.voted_topics.all|length > 10 %}
    <div class="row">
      <div class="span3 offset8"><a href="{% url 'accounts:profile_more_topics' pk=user_obj.pk %}">{% trans "View more" %}</a></div>
    </div>
    {% endif %}
    {% endif %}

    {% if user_obj.voted_posts.all|length > 0 %}
    <div class="row">
      <div class="span9 offset2">
        <div>{% trans 'Voted posts' %}</div>
        {% for item in user_obj.voted_posts.all|slice:":10" %}
        <div class="span11"><a href="{{ item.get_absolute_url }}">{{ item }}</a></div>
        {% endfor %}
      </div>
    </div>

    {% if user_obj.voted_posts.all|length > 10 %}
    <div class="row">
      <div class="span3 offset8"><a href="{% url 'accounts:profile_more_posts' pk=user_obj.pk %}">{% trans "View more" %}</a></div>
    </div>
    {% endif %}
    {% endif %}

    {% if user_position_json != "null" %}
    <div class="row">&nbsp;</div>
    <div class="row">
      <div class="span9 offset2">
	<div id="map"></div>
      </div>
    </div>
    {% endif %}
{% endblock %}
